import React, { Component } from 'react'
import {withRouter} from "react-router-dom"
import {
  Layout,
  Menu,
  Icon,
  Dropdown,
  Avatar,
  Badge,
} from "antd";

import "./Frame.css"
//引入路由，需要用到里面配置的参数
import { adminRoutes } from "../routes/index.js";
//引入redux里面的状态
import {connect} from "react-redux"
//过滤出isshow为true的路由
const routes=adminRoutes.filter(item=>item.isShow===true)

const { Header, Content, Sider } = Layout;
class Frame extends Component{
	render(props){
		//this.props里面可以获取到redux管理的状态了
		console.log(this.props)
		//获取地址栏的参数
		const pathName =this.props.location.pathname;
		//退出功能
		const popMenu = (
		  <Menu
		    onClick={(p) => {
		      if (p.key === "logOut") {
		        //清除token
				localStorage.removeItem("token");
		        this.props.history.push("/login");
		      } else if(p.key === "notice") {
				this.props.history.push("/admin/notice")
		      }
		    }}
		  >
		    <Menu.Item key="notice">通知中心</Menu.Item>
		    <Menu.Item key="setting">设置</Menu.Item>
		    <Menu.Item key="logOut">退出</Menu.Item>
		  </Menu>
		);
		return(
			<Layout>
			    <Header className="header" id="header">
					<span style={{color:"#ffffff",fontSize:"18px"}}>商品后台管理系统</span>,
					<Dropdown overlay={popMenu}>
					  <div>
					    <Avatar style={{marginRight:"10px"}}>Super</Avatar>
					    <Badge dot={!this.props.isRead}>
					      <span style={{ color: "#fff" }}>超级管理员</span>
					    </Badge>
					    <Icon type="down" />
					  </div>
					</Dropdown>
			    </Header>
			    <Layout>
			      <Sider width={200} className="site-layout-background">
			        <Menu
					  selectedKeys={[pathName]}
			          mode="inline"
			          defaultSelectedKeys={['1']}
			          defaultOpenKeys={['sub1']}
			          style={{ height: '100%', borderRight: 0 }}
			        >
						{routes.map((route) => {
						  return (
						    <Menu.Item
								key={route.path}
								onClick={(p) => this.props.history.push(p.key)}
						    >
						      <Icon type={route.icon} />
						      {route.title}
						    </Menu.Item>
						  );
						})}
			        </Menu>
			      </Sider>
			      <Layout style={{ padding: '0 24px 24px' }}>
			        <Content
			          className="site-layout-background"
			          style={{
			            padding: 24,
			            margin: 0,
			            minHeight: 280,
			          }}
			        >
			        {this.props.children}
			        </Content>
			      </Layout>
			    </Layout>
			  </Layout>
		)
	}
}
const mapState=state=>{
	return state
}
export default connect(mapState)(withRouter(Frame))